 <!DOCTYPE html>

<html>
<head>
<title>Slide show</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>

	<div>
		Slide No: <input type="text" id="numinput" /> &nbsp; &nbsp; &nbsp;
		&nbsp; Directory : <input type="text" id="dirinput" size="30" />
	</div>
	<div>
		<button type="button" onclick="startSlides();">Start</button>
		<button type="button" onclick="prevSlide();">&lt;&lt;Prev</button>
		<button type="button" onclick="askSlide();">Show</button>
		<button type="button" onclick="nextSlide();">Next&gt;&gt;</button>
		<button type="button" onclick="stopShow();">Stop</button>
	</div>
	<!-- Server responses get written here -->
	<div>
		<img id="ws_image">
	</div>
	<div id="messages"></div>

	<script type="text/javascript">
		var webSocket;
		var messages = document.getElementById("messages");

		function startSlides() {
			// Ensures only one connection is open at a time
			if (webSocket !== undefined
					&& webSocket.readyState !== WebSocket.CLOSED) {
				writeResponse("Show is in progress.");
				return;
			}
			// Create a new instance of the websocket
			webSocket = new WebSocket(
					"ws"+(window.location.protocol=="https:"?"s":"")+"://"
							+ window.location.hostname
							+ (window.location.port ? ":"
									+ window.location.port : "")
							+ "/echoserver/slides/one?dir="
							+ encodeURIComponent(document
									.getElementById("dirinput").value));

			/**
			 * Binds functions to the listeners for the websocket.
			 */
			webSocket.onopen = function(event) {
				// For reasons I can't determine, onopen gets called twice
				// and the first time event.data is undefined.
				// Leave a comment if you know the answer.
				if (event.data === undefined)
					return;

				writeResponse(event.data);
			};

			webSocket.onmessage = function(event) {
				if (typeof event.data === "string") {
					writeResponse(event.data);
					return;
				}
				var blob;
				if (event.data instanceof Blob)
					blob = event.data;
				else {
					var bytes = new Uint8Array(event.data);
					blob = new Blob([ bytes.buffer ]);
				}

				var image = document.getElementById('ws_image');

				var reader = new FileReader();
				reader.onload = function(e) {
					image.src = e.target.result;
				};
				reader.readAsDataURL(blob);
			};

			webSocket.onclose = function(event) {
				writeResponse("Show stopped");
			};
		}

		/**
		 * Sends the value of the text input to the server
		 */
		function askSlide() {
			var text = document.getElementById("numinput").value;
			webSocket.send(text);
		}

		function nextSlide() {
			document.getElementById("numinput").value =1+Number(document.getElementById("numinput").value);
			askSlide();
		}

		function prevSlide() {
			document.getElementById("numinput").value =-1+Number(document.getElementById("numinput").value);
			askSlide();
		}

		function stopShow() {
			webSocket.close(1000);
		}

		function writeResponse(text) {
			messages.innerHTML += "<br/>" + text;
		}
	</script>

</body>
</html> 